<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: Wupy
 * @Date: 2022-12-28 20:49:01
 * @LastEditors: Wupy
 * @LastEditTime: 2023-02-20 14:28:22
-->
<template>
    <div class="header">
        <!-- 导航栏 -->
        <div class="navTitle">
            <div class="leftIcon"><var-icon name="chevron-left" :size="35" color="#000" @click="backRouter()" /></div>
            <div class="NavContent">我的课程</div>
            <!-- <div class="rightIcon"><var-icon name="plus-circle" :size="35" color="rgb(38,89,247)" /></div> -->
        </div>
        <!-- 搜索功能 -->
        <input type="text" class="searchInput" placeholder="搜索" v-model="searchLesson">

        <!-- 课程列表 -->
        <div class="lessonCard" v-for="item in filterData">
            <!-- 卡片顶部 -->
            <div class="head">
                <!-- 课程图片 -->
                <var-image class="lessonImg" src="./image/lesson1.jpg" alt="" />
                <!-- 课程标题与作者 -->
                <div class="lessonContent">
                    <div class="lessonName">{{ item.name }}</div>
                    <div class="lessonTeacher">{{ item.teacherName }}</div>
                </div>
                <!-- 课程卡片右侧图标 -->
                <var-icon class="toDetailIcon" name="chevron-right" @click="toDetail(item.id)" />
            </div>
            <!-- 卡片底部 -->
            <div class="foot">
                <div class="lessonDesc">{{ item.description }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router';
import { useLessonStore } from '@/stores/lesson'
import { storeToRefs } from 'pinia';

const lessonStore = useLessonStore()

const router = useRouter()
const searchLesson = ref('')
//点击返回图标的方法
function backRouter() {
    router.push('/home')
}
const { LessonList } = lessonStore
const { lessonList } = storeToRefs(lessonStore)
//定义显示图片的方法
const imgRequire = (img: string) => {
    try {
        const handlePath = img.replace('.', '.');
        return new URL(handlePath, import.meta.url).href;
    } catch (error) {
        console.warn(error);
    }
};
// 全部课程的集合
// const lessonList = ref([
//     {img:'./image/lesson1.jpg',lessonName:'软件工程方法与实践',lessonTeacher:'成立君',lessonDesc:'软件工程是软件工程专业的必修课'},
//     {img:'./image/lesson1.jpg',lessonName:'软件工程方法与实践',lessonTeacher:'成立君',lessonDesc:'软件工程是软件工程专业的必修课'},
//     {img:'./image/lesson1.jpg',lessonName:'软件工程方法与实践',lessonTeacher:'成立君',lessonDesc:'软件工程是软件工程专业的必修课'},
//     {img:'./image/lesson1.jpg',lessonName:'软件工程方法与实践',lessonTeacher:'成立君',lessonDesc:'软件工程是软件工程专业的必修课'},
// ])
onMounted(async () => {
    await LessonList()

})

// 搜索功能
const filterData = computed(() =>
    lessonList.value.filter(
        (data) =>
            !searchLesson.value ||
            data.name.toLowerCase().includes(searchLesson.value.toLowerCase())
    )
)

//点击课程详情的方法
function toDetail(courseId: any) {
    router.push({
        path: '/lessonDetail',
        query: {
            courseId: courseId
        }
    })
    // console.log(courseId);

}


</script>

<style lang="less" scoped>
.header {
    background-color: #fff;
    height: 120px;
}

.navTitle {
    padding: 10px;
    display: flex;

    .NavContent {
        margin-top: 6px;
        margin-left: 30%;
        font-weight: 600;
        font-size: 19px;
    }

    .rightIcon {
        margin-left: 30%;
    }
}

.searchInput {
    margin-top: 10px;
    margin-left: 10px;
    width: 330px;
    height: 35px;
    background-color: rgb(241, 243, 250);
    border: none;
    border-radius: 20px;
    padding-left: 40px;
    background-image: url('./image/searchIcon.png');
    background-size: 20px 20px;
    background-position: 15px 8px;
    background-repeat: no-repeat;
    font-size: 16px;

}

.searchInput::placeholder {
    color: #B2B5DC;

}

.searchInput:focus {
    outline: none;
}

.lessonCard {
    margin-top: 25px;
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 130px;
    border-radius: 10px;
    background-color: #fff;

    .head {
        display: flex;
        padding: 15px;

        .lessonImg {
            width: 60px;
            height: 60px;
        }

        .lessonContent {
            margin-left: 15px;

            .lessonName {
                font-size: 18px;
                font-weight: 700;
            }

            .lessonTeacher {
                margin-top: 6px;
                color: rgb(146, 147, 150);
            }
        }

        .toDetailIcon {
            margin-right: 10px;
            margin-top: -30px;
            color: rgb(146, 147, 150);
        }
    }

    .foot {
        margin-left: 15px;

        .lessonDesc {
            color: rgb(146, 147, 150);
            /*1. 先强制一行内显示文本*/
            white-space: nowrap;
            /*2. 超出的部分隐藏*/
            overflow: hidden;

            /*3. 文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
        }
    }
}
</style>